<template>
  <view class="express-info">
    <template v-if="formMailInfo">
      <view class="header">
        <view class="title">德邦快递</view>
        <view class="sn">
          <view class="sn-text">快递单号:{{ black_Get(formMailInfo,'sn') }}</view>
          <view class="copy()" @tap="copy(black_Get(formMailInfo,'sn'))">复制</view>
        </view>
      </view>
      <view class="address">
        <view class="a-item">
          <view class="a-icon">收</view>
          <view class="address-text">
            {{ black_Get(formMailInfo,'logisticsForm.recipientAddress') }}
            <text>{{black_Get(formMailInfo,'logisticsForm.recipient') }}</text>
            {{ black_Get(formMailInfo,'logisticsForm.recipientMobile') }}
          </view>
        </view>
        <view class="a-item">
          <view class="a-icon">寄</view>
          <view class="address-text">
            {{ black_Get(formMailInfo,'logisticsForm.sendAddress') }}
            <text>{{black_Get(formMailInfo,'logisticsForm.sender') }}</text>
            {{ black_Get(formMailInfo,'logisticsForm.sendMobile') }}
          </view>
        </view>
      </view>
      <view class="process">
        <van-steps :steps="steps" active-color="#de1980" active="active" direction="vertical"></van-steps>
      </view>
      <a-empty v-if="steps.length === 0" :src="'empty/order.png'|prefixOssUrl" :tips="['暂无物流信息']"></a-empty>
    </template>
    <a-logo type="text"></a-logo>
  </view>
</template>

<script>
  import vanSteps from 'vant/steps/index';
  import {
    model
  } from '@/model';

  const {
    LogisticsBo
  } = model.collection;
  export default {
    components: {
      vanSteps
    },
    data() {
      return {
        active: 1,
        id: 0,
        formMailInfo: {},
        steps: []
      }
    },
    onLoad(options) {
      this.id = Number(options.id)
      this.getFormMailInfo();
    },
    methods: {
      getFormMailInfo() {
        LogisticsBo.sendApi('formMailInfo', {
          params: {},
          data: {
            query: {
              id: this.id
            }
          }
        }).then(res => {
          const {
            status,
            data,
          } = res;
          if (status) {
            this.formMailInfo = data
            data.logisticsFormTrackList.forEach(e => {
              this.steps.push({
                text: e.description,
                desc: e.time,
                inactiveIcon: 'logistics',
                activeIcon: 'location'
              })
            })
          }
        })
      },
      copy(v) {
        this.copyText(v)
      }
    }
  };
</script>

<style lang="less">
  page {
    .express-info {
      .header {
        padding: 20rpx;

        .title {
          font-weight: bold;
        }

        .sn {
          margin-top: 20rpx;
          padding-bottom: 30rpx;
          display: flex;
          justify-content: space-between;
          border-bottom: 1rpx solid #eaeaea;

          .sn-text {
            font-weight: 500;
            font-size: 26rpx;
            color: #666666;
          }

          .copy {
            font-size: 26rpx;
            color: #db187c;
          }
        }
      }

      .address {
        padding: 20rpx;

        .a-item {
          margin-bottom: 30rpx;
          padding-bottom: 30rpx;
          display: flex;
          justify-content: space-between;
          border-bottom: 1rpx solid #eaeaea;

          .a-icon {
            width: 45rpx;
            height: 45rpx;
            background: #db1c7e;
            border-radius: 50%;
            line-height: 42rpx;
            font-size: 26rpx;
            color: #fefefe;
            text-align: center;
          }

          .address-text {
            width: 650rpx;

            text {
              margin: 0 10rpx;
            }
          }
        }
      }

    }
  }
</style>